<template>
  <el-dialog
    class="gl_dialog_TitleLine"
    width="720px"
    title="审核进度"
    :visible.sync="approveDialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
  >
    <el-scrollbar v-loading="tableLoading" wrap-class="scrollbar-wrapper gl_dialog_height">
      <div class="block">
        <div v-if="tableData.length>0" class="approve_content">
          <div v-for="item in tableData" :key="item.id" class="steps">
            <span class="circle" />
            <span class="gl_pl_10">{{ item.approveTime | FormatDate('yyyy-MM-dd') }}</span>
            <div class="steps_content">
              <p>
                <span>{{ item.unitName }}于{{ item.approveTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}进行了审核的操作。</span>
                <span>审核结果为：</span>
                <span :class="[ item.approveResultCode == 'ApproveSuccess' ? 'gl_color_success': 'gl_color_grey' ]">{{ item.approveResult.name }}</span>
              </p>
              <p class="gl_mt_10">备注说明：{{ item.comment }}</p>
            </div>
          </div>
        </div>
        <div v-else class="gl_noData">
          <p>暂无数据</p>
        </div>
      </div>
    </el-scrollbar>
  </el-dialog>
</template>
<script>
import { api_GET_TrainTrainningApproveApproveStatusTrainningId } from '@/extend/api/trainswaggerApi/app';
export default {
  data() {
    return {
      tableLoading: false,
      tableData: [],
      approveDialogVisible: false
    };
  },
  methods: {
    open(gameInfo) {
      this.gameId = gameInfo.id;
      this.tableData = [];
      this.getApproveProgress();
      this.approveDialogVisible = true;
    },
    // 获取审核进度
    getApproveProgress() {
      this.tableLoading = true;
      api_GET_TrainTrainningApproveApproveStatusTrainningId(this.gameId).then(res => {
        this.tableData = res.filter(item => {
          return item.approveResultCode;
        }) || [];
        console.log(this.tableData);
        this.tableLoading = false;
      }, error => {
        this.tableLoading = false;
        this.$message({ type: 'error', message: error.error && error.error.code || '' });
      });
    }
  }
};
</script>
<style scoped>

.approve_content {
  padding: 24px 48px 24px 24px;
}
.circle {
  width: 8px;
  height: 8px;
  display: inline-block;
  background: #ffffff;
  border: 2px solid #108ee9;
  border-radius: 50%;
  position: relative;
}
.steps {
  color: #595959;
  font-size: 14px;
}
.steps:last-child ::after {
  background: #fff;
}
.steps ::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 1px;
  height: 130px;
  width: 2px;
  background: #e9e9e9;
}
.steps_content {
  height: 88px;
  background: #f7f8fa;
  border-radius: 8px;
  padding: 13px 20px;
  margin: 8px 0 24px 15px;
  font-weight: 600;
  color: #000;
}
</style>
